<template>
  <CommonForm ref="form" class="q-pa-lg" :form="form" :value="$data" :input-params="inputParams" auto-save />
</template>

<script>
// 【首选项设置对话框】
import Vue from 'vue'
import { mapActions } from 'vuex'
import { mapStateRW } from 'boot/utils'

const { EDIT_PREF } = Vue.store.state.main

// 缩放比率列表格式
const ZOOM_LEVELS_FORMAT = /^(\d\.\d{1,3}|[1-9])(, *(\d\.\d{1,3}|[1-9]))+$/
const ZOOM_LEVELS_FORMAT_HINT = '格式为：比率值1, 比率值2, ...（取值限0.001~9.999）'

export default {
  data: vm => ({
    ...vm.$mapProps(EDIT_PREF, 'm_', Vue.store.state.main, val => {
      if (val instanceof Array) return val.join(', ')
      return val
    }),
    form: [
      {
        m_maxUndos: { t: 'num', label: '最大撤销次数：', minVal: 0, maxVal: 1000, defVal: 100 }
      },
      {
        m_viewZoomLevels: {
          label: '视图缩放比率列表：',
          labelWidth: 130,
          qInputClass: 'q-space',
          class: 'q-space',
          rules: [vm.zoomRule],
          hint: ZOOM_LEVELS_FORMAT_HINT
        }
      },
      {
        m_uiZoomLevels: {
          label: '界面缩放比率列表：',
          labelWidth: 130,
          qInputClass: 'q-space',
          class: 'q-space',
          rules: [vm.zoomRule],
          hint: ZOOM_LEVELS_FORMAT_HINT
        }
      }
    ],
    inputParams: {
      t: 'text',
      outlined: true,
      labelWidth: 100,
      labelClass: 'self-start',
      labelStyle: { marginTop: '7px' },
      style: { minWidth: '240px' }
    }
  }),

  inject: ['dialog'],

  computed: {
    ...mapStateRW('main', EDIT_PREF)
  },

  methods: {
    ...mapActions('main', ['saveEditPref']),

    zoomRule(val) {
      return ZOOM_LEVELS_FORMAT.test(val) || ZOOM_LEVELS_FORMAT_HINT
    },

    onOk() {
      if (this.$refs.form.hasError) {
        this.$notify('输入值存在错误，请先修复', 'warn')
        this.dialog.shake()
        return false
      }
      this.$syncProps(EDIT_PREF, this, 'm_', this, (val, name) => {
        if (name.endsWith('ZoomLevels')) return val.split(',').map(Number)
        return val
      })
      this.saveEditPref()
    }
  }
}
</script>
